﻿{extend name="public:base" /}

{block name="content"}
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox search-form">
                <div class="ibox-content">
                    <div class="row">
                        <div class="col-sm-2 m-b-sm">
                            <div class="input-group">
                                <select name="one_pid" class="form-control form-control-lg one_select">
                                    <option value="0">请选择招商经理</option>
                                    {volist name="user_list" id="vo"}
                                    <option value="{$vo.id}" {$vo.id == input('one_pid') ? 'selected' : ''}>{$vo.username} / {$vo.mobile}</option>
                                    {/volist}
                                </select>
                            </div>
                        </div>
                        <div class="col-sm-2 m-b-sm">
                            <div class="input-group">
                                <select name="two_pid" class="form-control form-control-lg two_select">
                                    <option value="0">请选择城市合伙人</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-sm-2 m-b-sm">
                            <div class="input-group">
                                <select name="three_pid" class="form-control form-control-lg three_select">
                                    <option value="0">请选择分享官</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-sm-2 m-b-xs">
                            <input placeholder="请输入姓名" type="text" name="username" value="{:input('username')}" class="form-control form-control-sm">
                        </div>
                        <div class="col-sm-2 m-b-xs">
                            <input placeholder="请输入手机号" type="text" name="mobile" value="{:input('mobile')}" class="form-control form-control-sm">
                        </div>
                        <div class="col-sm-2 m-b-sm">
                            <div class="input-group">
                                <button type="button" class="btn btn-primary btn-lg screen-btn">搜索</button>
                            </div>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                            <tr>
                                <th>姓名</th>
                                <th>手机号</th>
                                <th>状态</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            {volist name="list" id="vo"}
                            <tr>
                                <td>{$vo.username}</td>
                                <td>{$vo.mobile}</td>
                                <td>{$vo.status == 1 ? '正常' : '禁用'}</td>
                                <td>{$vo.create_time|timeFormat}</td>
                                <td class="project-actions">
                                    <a href="{:url('doThreeUser', ['id' => $vo.id, 'pid' => input('pid')])}" class="btn btn-white btn-sm"><i class="iconfont icon-edit"></i> 编辑 </a>
                                    <a href="{:url('delThreeUser', ['id' => $vo.id])}" class="btn btn-white btn-sm ajax-del"><i class="iconfont icon-trash"></i> 删除 </a>
                                </td>
                            </tr>
                            {/volist}
                            </tbody>
                        </table>
                        {if !empty($list)}{$list->render()}{/if}
                    </div>

                </div>
            </div>
        </div>

    </div>
</div>

{/block}

{block name="js"}
<script>
var user_list_json = {$user_list_json};
var one_pid = `{:input('one_pid')}` ? parseInt(`{:input('one_pid')}`) : 0;
var two_pid = `{:input('two_pid')}` ? parseInt(`{:input('two_pid')}`) : 0;
var three_pid = `{:input('three_pid')}` ? parseInt(`{:input('three_pid')}`) : 0;

renderSelect(one_pid);

$(document).on('change', '.one_select', function () {
    var one_pid = $(this).val();
    renderSelect(one_pid);
})

function renderSelect(one_pid){
    var option = `<option value="0">请选择城市合伙人</option>`;
    var three_option = `<option value="0">请选择分享官</option>`;
    if (user_list_json.length > 0) {
        for (var i = 0; i < user_list_json.length; i++) {
            var obj = user_list_json[i];
            if (obj.id == one_pid) {
                var son_list = obj.son_list;
                if(son_list.length > 0){
                    son_list.forEach(val => {
                        var selected = val.id == two_pid ? 'selected' : '';
                        option += `<option value="${val.id}" ${selected}>${val.username} / ${val.mobile}</option>`;

                        // 分享官下拉列表
                        if(val.son_list.length > 0){
                            val.son_list.forEach(value =>{
                                var three_selected = value.id == three_pid ? 'selected' : '';
                                three_option += `<option value="${value.id}" ${three_selected}>${value.username} / ${value.mobile}</option>`;
                            })
                        }
                    })
                }
                break;
            }
        }
    }
    $('.two_select').html(option);
    $('.three_select').html(three_option);
}

</script>
{/block}

